<template>
    <!-- ref="multipleTable"  //获取元素的标识
          :height="settings.height"//表格自定义高度
          v-loading="settings.isLoading"//数据加载动画
          @selection-change="(e) => handleClick('select', e)"//当选择项发生变化时会触发该事件
          highlight-current-row//高亮行
          @current-change="handleCurrentChange"//行发生变化时出发
          @cell-click="handleCellclick"//当某个单元格被点击时会触发该事件
          @select="handleSelect"//有勾选框单选
          @select-all="handleSelectall"//有勾选框全选
          :data="data.list"//表格展示数据
          style="width: 100%"//表格宽度
          row-key="id"//折叠表格必填项，行标识
          :expand-row-keys="settings.expandrowkeys"//需要展开行的数组
          :indent="0"//展开行缩紧
          default-expand-all//默认关闭展开行
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"//展开行设置，有children默认就有展开行 -->

    <div class="eltable">
        <el-table
            ref="multipleTable"
            :max-height="settings.height"
            v-loading="settings.isLoading"
            @selection-change="(e) => handleClick('select', e)"
            highlight-current-row
            @current-change="handleCurrentChange"
            @cell-click="handleCellclick"
            @select="handleSelect"
            @select-all="handleSelectall"
            :data="data.list"
            style="width: 100%"
            row-key="id"
            :expand-row-keys="settings.expandrowkeys"
            :indent="32"
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :reserve-selection="settings.isSelection"
        >
            <!-- //固定勾选框列，按需设置settings -->
            <el-table-column v-if="settings.isSelection" width="55" type="selection" fixed></el-table-column>
            <!-- //固定排序列，按需设置settings -->
            <el-table-column v-if="settings.isIndex" type="index" :index="1" fixed label="序号" width="60"></el-table-column>
            <!-- //默认数据展示 -->
            <template v-for="item in header">
                <template v-if="item.prop !== 'action' && item.columned != true">
                    <!-- type //selection/index/expand -->
                    <el-table-column
                        :key="item.prop"
                        :type="item.type"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                        :fixed="item.fixed"
                        :show-overflow-tooltip="true"
                        header-align="left"
                        class-name="cloumnCell"
                    ></el-table-column>
                </template>
                <template v-if="item.columned == true">
                    <!-- //某列数据单独处理插槽 -->
                    <slot :name="item.prop"></slot>
                </template>
            </template>
            <!-- //操作列之类的插槽 -->
            <slot name="action"></slot>
        </el-table>
        <!-- //翻页组件封装 -->
        <el-pagination
            v-if="settings.isPagination"
            background
            style="text-align: right; padding: 25px 15px 25px 0"
            @size-change="(e) => handleClick('pageSize', e)"
            @current-change="(e) => handleClick('currentPage', e)"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="settings.total"
        ></el-pagination>
    </div>
</template>

<script>
/*传值说明:
      settings:{ 相关配置
          isLoading加载数据时显示动效
          height表格高度
          autoHeight:true 是否自动高度
          isSelection; 是否有多选
          selectionWidth多选的宽度
          isIndex 是否需要序列号,默认不需要
          isBorder:是否加框线,默认添加,
          isPagination:是否添加分页,默认false,
          total: 列表总条数
          currentPage 当前页数
      }
      tableData: { 表格数据}
      header:{表头字段
          columned 是否使用插槽
      }
  事件说明:
      handleClick
      参数 type 点击的类型,如
      选择select, 多选时
      编辑edit, 按钮为编辑时
      查看show, 按钮为查看时
      删除delete, 按钮为删除时
      当前条数pageSize, 开启分页时
      当前页数currentPage等 开启分页时
      e 选中项
      i 选中索引
  */
export default {
    name: 'table-custom',
    data() {
        return {};
    },
    props: {
        data: { type: Object, default: () => {} },
        header: { type: Array, required: true },
        settings: {
            type: Object,
            default: () => {
                return {
                    height: null,
                    isBorder: true,
                    isLoading: false,
                    isIndex: false,
                    isSelection: false,
                    isPagination: false,
                    currentPage: 1,
                    pageSize: 20,
                    total: 0,
                };
            }
        },
    },
    computed: {
        currentPage: function () {
            return this.settings.currentPage;
        },
        pageSize: function () {
            return this.settings.pageSize;
        }
    },
    mounted() {},
    watch: {
        settings: {
            handler: function (e) {
                console.log(e);
                if (typeof e.isBorder === 'undefined') e.isBorder = true;
                if (typeof e.total === 'undefined') e.total = 0;
            },
            immediate: true
        },
        'settings.expandrowkeys'() {
            //展开行手风琴效果设置
            this.data.list.map((item) => {
                if (this.settings.expandrowkeys[0] != item.id) {
                    this.$refs.multipleTable.toggleRowExpansion(item, false);
                } else {
                    this.$refs.multipleTable.toggleRowExpansion(item);
                }
            });
        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleClick(type, e) {
            console.log(e);
            if (type == 'select') {
                this.$emit('select', e);
            } else if (type == 'pageSize') {
                //一页多少条
                this.$emit('pageSize', e);
            } else {
                //第几页
                this.$emit('currentPage', e);
            }
        },
        handleCurrentChange(val) {
            this.$emit('currentChange', val);
        },
        // handleCellclick(row, column, cell, event) {//下面函数可包含参数
        handleCellclick() {
            //切换选中状态
            // this.$refs.multipleTable.toggleRowSelection(row);
        },
        handleSelect(selection) {
            //勾选
            this.$emit('handleSelect', selection);
        },
        handleSelectall(selection) {
            //全选
            this.$emit('handleSelectall', selection);
        }
    }
};
</script>

<style scoped lang="scss">
@import './table.scss';
/* //关闭原生组件展开行按钮 */
.el-table .el-table__expand-icon {
    display: none;
}
/* //展开行样式单独设置 */
.el-table__row--level-1 {
    background-color: #f0edff;
}
/* //取消点击行配置 */
.el-table__body tr.current-row > td {
    background-color: #fff !important;
}
/deep/.el-table thead {
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 900;
    color: #1d2129;
}
/deep/.el-table .cell {
    font-size: 13px;
}
.eltable {
    background: white;

    padding: 0px 20px;
}
</style>